<template>
  <Echart :height="height" width="100%" :options="options" />
</template>

<script>
import Echart from '@/components/Echart/index'
import resize from '@/utils/resize'

export default {
  name: 'LineChart',
  components: { Echart },
  mixins: [resize],
  props: {
    cdata: {
      type: Object,
      default() {
        return {}
      }
    },
    height: {
      type: String,
      default() {
        return '100%'
      }
    }
  },
  data() {
    return {
      options: null
    }
  },
  watch: {
    cdata: {
      handler(newValue) {
        this.options = {
          color: newValue.color,
          grid: {
            left: '2%',
            top: '14%',
            right: '2%',
            bottom: '2%',
            // 把x轴和y轴纳入 grid
            containLabel: true
          },
          tooltip: {
            show: true
          },
          legend: {
            show: true,
            type: 'plain',
            left: 0,
            top: '0%',
            orient: 'horizontal',
            data: newValue.legendName
          },
          xAxis: {
            axisLabel: {
              formatter(params) {
                // console.log(params)
                const arr = params.split(' ')
                if (arr[1]) { return arr[0] + '\n' + arr[1] } else return arr[0]
              }
            },

            type: 'category',
            data: newValue.xAxis,
            boundaryGap: false
          },
          yAxis: {
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: false
            },
            minInterval: 1,
            type: 'value'
          },
          series: [
            {
              name: newValue.legendName[0],
              data: newValue.value,
              type: 'line',
              smooth: false,
              areaStyle: {
                opacity: 0.09
              }
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style scoped></style>
